<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>hello vue</title>
<style type="text/css">

</style>
</head>
<body>





<div id="app">


<ul>
	<li>1-1:因为btn是在div面板之内，所以当点击按钮之后，div也会跟着点击</li>
	<li>1-2:可以添加.top 事件修饰符，只修饰（只点击触发）当前事件</li>
</ul>

	<div class="inner" @click="btn1" style="height: 100px;background: pink">
		<button @click.stop="btn2">点击</button>
	</div> 



<br>
<ul>
	<li>2-1:  .prevent 可以阻止默认行为，例如a标签的默认跳转、还有表单的默认行为（表单的默认行为待查）</li>
</ul>
	<a href="http://www.baidu.com" @click.prevent="btn3">使用 .prevent 阻止默认事件的执行，比如此时a标签跳转百度，当点击后默认跳转，.prevent 可以阻止跳转页面</a>
<br><br>


<ul>
	<li>3-1：当点击容器内的子元素时： 会默认点击子元素再点击父元素，  .capture 可修饰为先点击当前父级元素再点击子元素</li>
</ul>
	<div class="inner" @click.capture="btn1" style="height: 100px;background: pink">
		<button @click="btn2">点击</button>
	</div>




<ul>
	<li>4-1： .self  为只有点击自身时才会触发当前事件</li>
	<li>4-2： 点击btn时默认点击div，.self 修饰后为只点击自身有效 </li>
	<li>4-3： .self 只负责自身，当元素冒泡多个时，只阻止自身， 不阻止其他</li>
	<li>4-4： 就例如 三级元素点击后，默认向二级元素冒泡，二级元素添加 .self会不触发自身效果，随后三级元素继续冒泡到一级元素默认点击</li>
</ul>
	<div class="inner" @click.self="btn1" style="height: 100px;background: pink">
		<button @click="btn2">点击</button>
	</div>


<ul>
	<li>5-1： .once 设定只能触发一次效果 </li>
</ul>
	<div class="inner" @click="btn1" style="height: 100px;background: pink;overflow: hidden">
		<button @click.once="showImg">点击(.once 设定点击后只能触发一次效果）</button>
		<br>
		<img src="images/banner1.jpg"  v-show="show">
	</div>



</div>









<br>
<script src="vue.js"></script>

<script type="text/javascript">

var app = new Vue({
  el: '#app',

  data: {
  	show:false,
  },

  methods:{

  		btn1(){
  			console.log("div面板点击")
  		},
  		btn2(){
  			console.log("按钮的点击")
  		},
  		btn3(){
  			console.log("点击了a标签")
  		},

  		showImg(){
  			this.show = !this.show
  		}


  }

})





</script>

	
</body>
</html>